<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>分页测试</title>
    <!--css样式-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-table-develop/dist/bootstrap-table.css" rel="stylesheet">

    <!--js-->
    <script src="assets/js/jquery-2.1.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="bootstrap-table-develop/dist/bootstrap-table.js"></script>
    <script src="bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<table id="table"></table>
<script>

    $('#table').bootstrapTable({
        scriptCharset: 'utf-8',
        url: '/articleManager/getData',        //请求后台的URL（*）
        method: 'post',
        contentType : "application/x-www-form-urlencoded;charset=UTF-8", // 如果后台要通过request获取数据，必须加这一行
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        queryParams : function (params) {
            var off = params.offset;
            if(off != 0){
                off = off/this.pageSize;
            }
            off+=1;
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: off,  //页码
            };
            return temp;
        },
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        columns: [
            {
                field: 'o_id',
                title: '文章编号',
                align: 'center'
            },
            {
                field: 'o_mc',
                title: '名称',
                align: 'center'
            },
            {
                field: 'o_rq',
                title: '日期',
                align: 'center'
            },
            {
                field: 'o_dj',
                title: '点击数',
                align: 'center'
            },
            {
                field: 'o_fl',
                title: '分类',
                align: 'center'
            },
        ]
    });


</script>

</body>
</html>